<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-11-01 15:03:03
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-11-20 18:18:05
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

  <body ontouchstart="">
    <div class="wxapi_container">
        <div class="lbox_close wxapi_form">
         
          <h3 id="menu-location">一键导航测试</h3>
          <span class="desc">通过微信内置地图一建导航</span>
          <button class="btn btn_primary" id="openLocation">点击导航</button>
          <span class="desc">测试位置接口</span>
          <button class="btn btn_primary" id="getLocation">获取坐标</button>
     
        </div>
      </div>
      
    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
    <script>
      // 获取最新的token对象
      let url = 'http://localhost:8090/wx'
      let rel;
      $.ajax({ 
        type: "get", 
        url, 
        cache:false, 
        async:false, 
        dataType: 'json',
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function(xmlobj){ 
          rel = xmlobj
          console.log('成功--',xmlobj);
        }
      }).responseText;
      
      console.log('token信息对象: ',typeof rel,rel,rel.length);

      console.log('wx',wx);
      let obj =rel;
      // const obj ={
      //   "appId":"wx3680aee5b396cc0f",
      //   "timestamp":1637402688718,
      //   "nonceStr":"5158860791725619",
      //   "signature":"c383d0d37c13fed1f5cefe2c33776025c95816bc"};
      const jsArr = [
        'openLocation','updateTimelineShareData',
        'getLocation','onMenuShareQZone','getNetworkType'
      ]
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: obj.appId, // 必填，公众号的唯一标识
        timestamp: obj.timestamp, // 必填，生成签名的时间戳
        nonceStr: obj.nonceStr, // 必填，生成签名的随机串
        signature: obj.signature,// 必填，签名
        jsApiList: [
        'openLocation','updateTimelineShareData',
        'getLocation','onMenuShareQZone','getNetworkType','chooseImage'
      ] // 必填，需要使用的JS接口列表
      });

      wx.ready(function(a,b){
        console.log('read',a,b);

        wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    console.log("选择图片成功")
  var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  }
});
        
        wx.checkJsApi({
          jsApiList: jsArr, // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function(res) {
            console.error('success--ready',res);
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          }
        });
        wx.updateTimelineShareData({ 
          title: '12', // 分享标题
          link: 'http://www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: '', // 分享图标
          success: function () {
            // 设置成功
            alert('分享成功')
          }
        })
        wx.getNetworkType({
          success: function (res) {
            var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            alert('networkType:'+networkType)
          }
        });
        wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            console.error('location:',res);
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度

            wx.openLocation({
                latitude:latitude, // 纬度，浮点数，范围为90 ~ -90
                longitude:113.377785, // 经度，浮点数，范围为180 ~ -180。
                name: longitude, // 位置名
                address: '我的地址', // 地址详情说明
                scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
                infoUrl: 'http://www.baidu.com/' // 在查看位置界面底部显示的超链接,可点击跳转
            });
          },
          error: (err)=>{
            console.error('err',err);
          }
        });
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });
      wx.error(function(a,b){
        console.error('error',a,b);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    </script>
</body>
</html>